<template>
  <div>
    <!-- 搜索栏 -->
    <div class="search-container">
      <div class="search">
        人员姓名：
        <el-input
          v-model="input"
          class="search-input"
          placeholder="Please input"
          @input="filterTable"
        />
      </div>
      <div class="search-treeSelect">
        <div class="treeselectName">职位：</div>
        <el-tree-select v-model="value" :data="data" class="tree-select" />
      </div>
    </div>
    <!-- 操作 -->
    <div class="operation">
      <el-button type="primary" @click="selectAll">全部</el-button>
      <el-button type="primary" @click="deleteSelected" :disabled="!hasSelected"
        >删除</el-button
      >
      <el-button type="primary" @click="exportExcel()">导出列表</el-button>
      <el-button type="primary" @click="add()">新增登记</el-button>
    </div>
    <!-- 表单 -->
    <div>
      <el-table
        :data="filteredData"
        style="width: 100%"
        border
        ref="table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="日期"
          property="date"
          width="120"
          align="center"
        >
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="120"
          align="center"
        />
        <el-table-column label="性别" property="sex" align="center" />
        <el-table-column label="联系电话" property="phone" align="center" />

        <el-table-column label="类型" property="type" align="center" />

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)" type="primary" size="mini"
              >编辑</el-button
            >
            <el-button
              @click="handleDelete(scope.row.id)"
              type="primary"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalUsers"
        layout="total, prev, pager, next, jumper"
        style="margin-top: 20px"
      />
    </div>

    <!-- 对话框 -->
    <div>
      <el-dialog v-model="dialogTableVisible" title="Tips" width="600px">
        <div id="main" style="width: 400px; height: 300px"></div>
      </el-dialog>
    </div>

    <div>
      <el-dialog v-model="addconst" title="新增登记" width="600px">
        <div id="main" style="width: 400px; height: 300px"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { onMounted } from 'vue'; 
import * as XLSX from "xlsx";

const value = ref();
const searchQuery = ref("");
const currentPage = ref(1);
const pageSize = ref(5);
const dialogTableVisible = ref(false);
const addconst = ref(false);
const input = ref(""); // 搜索框的值
const selectedItems = ref([]); // 用于保存选择的项

const exportExcel = () => {
  // 创建一个空的工作簿
  const wb = XLSX.utils.book_new();

  // 创建一个空的工作表
  const ws = XLSX.utils.aoa_to_sheet([]); // 空表格

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // Sheet1为工作表名称

  // 导出文件
  XLSX.writeFile(wb, "空表格.xlsx"); // 导出的文件名
};
// 名字搜索
const filteredData = computed(() => {
  const searchTerm = input.value.toLowerCase(); // 转小写以进行不区分大小写的搜索
  return tableData.value.filter((item) =>
    item.name.toLowerCase().includes(searchTerm)
  );
});

// 提交的功能方法
const selectAll = () => {
  //selectedItems.value = filteredData.value.slice(); // 选择所有过滤后的项
  // const table = tableRef.value; // 获取表格的引用
  //table.toggleAllSelection();
  input.value = '' 
};

// 处理选中变化
const handleSelectionChange = (selection) => {
  selectedItems.value = selection; // 更新选中项
  if (table) {  
    table.toggleAllSelection(); // 切换所有行的选中状态  
  } 
};

// 组件挂载后，确保可以获取到表格引用  


const deleteSelected = () => {
  // 执行删除逻辑
  tableData.value = tableData.value.filter(
    (item) => !selectedItems.value.includes(item)
  );
  // 清空选择
  selectedItems.value = [];
};

const hasSelected = computed(() => selectedItems.value.length > 0);

const add = () => {
  // 实现新增登记的逻辑，比如显示一个表单
  console.log("新增登记");
  addconst.value = true;
};

const data = [
  {
    value: "1",
    label: "老师",
  },
  {
    value: "2",
    label: "家长",
  },
  {
    value: "3",
    label: "学员",
  },
];
const tableData = ref([
  {
    id: 1,
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "老师",
  },
  {
    id: 2,
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "家长",
  },
  {
    id: 3,
    date: "2016-05-02",
    name: "Brandon Deckert",
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "家长",
  },
  {
    id: 4,
    date: "2016-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "老师",
  },
]);

const totalUsers = computed(() => filteredUsers.value.length);
const filteredUsers = computed(() => {
  return tableData.value.filter((tableData) =>
    tableData.name.includes(searchQuery.value)
  );
});

const handleDelete = (id) => {
  tableData.value = tableData.value.filter((tableData) => tableData.id !== id);
};

const handleEdit = () => {
  dialogTableVisible.value = true;
};

// 分页
const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleSearch = () => {
  currentPage.value = 1;
};
</script>

<style scoped>
/* 搜索栏 */
.search-container {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
.search {
  display: flex;
  align-items: center;
  gap: 0px;
}

.search-input {
  width: 240px;
}
.search-treeSelect {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.treeselectName {
  width: 59px;
}

.operation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.operation el-button {
  flex: 1;
  min-width: 100px;
}
</style>
